<template>
  <div>
    <!-- 插槽，可以把插槽区域中的内容可以进行替换，如果你不替换则使用默认 -->
    <!-- 替换插槽中的内空，调用组件时一定要用双标签 -->
    <!-- 单个插槽 可以定义多个，但是在替换是会替换多次，这样就重复显示 -->
    <!-- 给slot添加自定义属性，把当前的slot称为作用域插槽 -->
    <slot :row="row">
      <h3>我是一个标题</h3>
      <div>id：{{ row.id }} --- 姓名：{{ row.name }}</div>
    </slot>
    <!-- 具名插槽 -->
    <slot name="footer"><h6>默认值底部</h6></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: {
        id: 1,
        name: "张三",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
</style>